@import "base.scss";
@import "mixin.scss";

//SY-accountSet
.SY-accountSet {
    width: 95.8 * $fontSize10;
    font-weight: 300;
    .navTab {
        height: 6.2 * $fontSize10;
        line-height: 6.2 * $fontSize10;
        padding-left: 3.5 * $fontSize10;
        font-size: $fontSize16;
        margin-bottom: $fontSize10;
        background: $colorfff;
        .item {
            margin-right: 3.5 * $fontSize10;
            a {
                display: block;
                height: 6 * $fontSize10;
                border-bottom: $fontSize10 / 5 solid $colorfff;
                &:hover {
                    color: $color000;
                }
            }
            &.active a {
                color: $color000;
                border-color: $color000;
            }
        }
    }
    .accountSet {
        > div {
            margin-bottom: $fontSize10;
            background: $colorfff;
        }
        .titleBox {
            padding-left: 4 * $fontSize10;
            height: 5.4 * $fontSize10;
            line-height: 5.4 * $fontSize10;
            font-size: $fontSize16;
            color: $color666;
            border-bottom: $fontSize10 / 10 solid $colore5;
        }
        .settingBox {
            padding:0 4 * $fontSize10 0;
            .modelBox {
                height: 9 * $fontSize10;
                border-bottom: $fontSize10 / 10 solid $colore5;
                &:last-child {
                    border-bottom: 0;
                }
                .msg {
                    margin-top: 3 * $fontSize10;
                }
                .icon {
                    margin: $fontSize12 / 3 $fontSize20 0 1.5 * $fontSize10;
                    background-image: url("../img/icons/setting.png");
                    background-repeat: no-repeat;
                }
                &.cellPhone .icon {
                    width: $fontSize20;
                    height: $fontSize20 + 5;
                    background-position: 0 0;
                }
                &.email .icon {
                    width: $fontSize22;
                    height: $fontSize20 + 5;
                    background-position: - 2 * $fontSize12 0;
                }
                &.password .icon {
                    width: $fontSize22;
                    height: $fontSize20 + 5;
                    background-position: - 4 * $fontSize12 0;
                }
                &.payAccount .icon {
                    width: $fontSize20 + 5;
                    height: $fontSize20 + 5;
                    background-position: - 6 * $fontSize12 0;
                }
                &.payPwd .icon {
                    width: $fontSize22;
                    height: $fontSize20 + 5;
                    background-position: - 4 * $fontSize12 0;
                }
                .detail {
                    h2 {
                        font-size: $fontSize14;
                        line-height: $lineHeight - 0.3;
                        color: $color333;
                        margin-bottom: $fontSize14 / 2;
                        span {
                            font-size: $fontSize12;
                            margin-left: 1.5 * $fontSize10;
                            &.warning {
                                color: $colorred;
                            }
                        }
                    }
                    p {
                        font-size: 1.3 * $fontSize10;
                        color: $color666;
                        line-height: $lineHeight - 0.3;
                    }
                }
                .btnBox {
                    margin-top: 3.5 * $fontSize10;
                    a {
                        display: inline-block;
                        text-align: center;
                        width: 7.5 * $fontSize10;
                        height: 2.6 * $fontSize10;
                        line-height: 2.6 * $fontSize10;
                        font-size: $fontSize12;
                        color: $color333;
                        margin-left: 1.5 * $fontSize10;
                        @include link-posColor(#edeff0,$colordc);
                    }
                }
            }
        }
    }
    .identification {
        padding: 2.5 * $fontSize10 4 * $fontSize10 4 * $fontSize10;
        background: $colorfff;
        .title {
            font-size: $fontSize16;
            color: $color666;
            line-height: $lineHeight;
            margin:0 0 $fontSize20;
        }
        .textBox {
            width: 100%;
            padding: 2 * $fontSize12 0;
            background: #f2f7fd;
            .text {
                font-size: $fontSize14;
                color: $color666;
                line-height: 2 * $fontSize14;
                margin-left: $fontSize20;
                span {
                    color: $theme;
                }
            }
        }
        .validate {
            width: 16 * $fontSize10;
            height: 4.6 * $fontSize10;
            line-height: 4.6 * $fontSize10;
            font-size: $fontSize16;
            color: $colorfff;
            margin: 3 * $fontSize10 auto 0;
            @include link-posColor($theme,$darkTheme);
        }
        .wrongInfo {
            font-size: 1.3 * $fontSize10;
            color: #ff0000;
            line-height: $lineHeight;
            margin-top: 1.5 * $fontSize10;
        }
    }
}
